<template>
  <div>
    <!-- 导航栏 -->
    <van-nav-bar
      title="编辑收款账户"
      left-arrow
      :border="false"
      fixed
      @click-left="$utils.back($route.path);"
    />
    <div class="has-top"></div>

    <div class="bankType">
      <van-cell required>
        <span slot="title">收款类型</span>
        <template slot="right-icon">
          <van-radio-group v-model="acountType" class="flex">
            <van-radio name="1" checked-color="#f44">银行卡</van-radio>
            <van-radio name="2" checked-color="#f44" class="ml-20">微信</van-radio>
            <van-radio name="3" checked-color="#f44" class="ml-20">支付宝</van-radio>
          </van-radio-group>
        </template>
      </van-cell>
    </div>
    <!-- 银行卡 -->
    <div class="mt-10" v-if="acountType == '1'">
      <van-cell-group>
        <van-field
          readonly
          clickable
          required
          v-model="bankModel.bank.value"
          :label="bankModel.bank.label"
          placeholder="请选择所属银行"
          @click="showBank=true"
        />
        <van-popup v-model="showBank" position="bottom">
          <van-picker
            item-height="45"
            visible-item-count="4"
            show-toolbar
            :columns="bankList"
            @cancel="showBank = false"
            @confirm="bankConfirm"
          />
        </van-popup>
        <van-field
          clearable
          v-model="bankModel.branchBank.value"
          :label="bankModel.branchBank.label"
          placeholder="请输入所属分支行"
        />
        <van-field
          required
          clearable
          v-model="bankModel.acountName.value"
          :label="bankModel.acountName.label"
          placeholder="请输入账户名"
        />
        <van-field
          required
          type="tel"
          clearable
          v-model="bankModel.bankNumber.value"
          :label="bankModel.bankNumber.label"
          placeholder="请输入银行卡号"
        />
      </van-cell-group>
    </div>
    <!-- 微信 -->
    <div class="mt-10" v-if="acountType == '2'">
      <van-cell-group>
        <van-field
          required
          clearable
          v-model="weChatModel.acountName.value"
          :label="weChatModel.acountName.label"
          placeholder="请输入账户名"
        />
        <van-field
          required
          clearable
          v-model="weChatModel.weChat.value"
          :label="weChatModel.weChat.label"
          placeholder="请输入微信号"
        />
        <van-cell class="flex-v-c" title="收款二维码" required>
          <van-uploader
            class="avar"
            slot="right-icon"
            v-model="weChatQR"
            :max-count="1"
            :after-read="(file)=>{afterRead(file,'wechat')}"
            @delete="(file,detail)=>{afterDelete(file,detail,'wechat')}"
            preview-size="1.6rem"
          />
        </van-cell>
      </van-cell-group>
    </div>
    <!-- 支付宝 -->
    <div class="mt-10" v-if="acountType == '3'">
      <van-cell-group>
        <van-field
          required
          clearable
          v-model="alipayModel.acountName.value"
          :label="alipayModel.acountName.label"
          placeholder="请输入账户名"
        />
        <van-field
          required
          clearable
          v-model="alipayModel.alipay.value"
          :label="alipayModel.alipay.label"
          placeholder="请输入支付宝账号"
        />
        <van-cell class="flex-v-c" title="收款二维码" required>
          <van-uploader
            class="avar"
            slot="right-icon"
            v-model="alipayQR"
            :max-count="1"
            :after-read="(file)=>{afterRead(file,'alipay')}"
            @delete="(file,detail)=>{afterDelete(file,detail,'alipay')}"
            preview-size="1.6rem"
          />
        </van-cell>
      </van-cell-group>
    </div>

    <van-cell class="mt-10">
      <van-checkbox v-model="isDefault" shape="square" checked-color="#f44">设置为默认收款账户</van-checkbox>
    </van-cell>

    <div class="mtb-30 plr-20">
      <van-button type="danger" size="large" @click="submit">保存提交</van-button>
    </div>
  </div>
</template>

<script>
import { upLoad } from 'api/upload'

export default {
  data() {
    return {
      acountType: '1',
      // 银行卡Model
      bankModel: {
        bank: {
          label: '所属银行',
          value: '',
          require: true,
          requireMessage: '请选择所属银行'
        },
        branchBank: {
          label: '分支行',
          value: ''
        },
        acountName: {
          label: '账户名',
          value: '',
          require: true,
          requireMessage: '请输入账户名'
        },
        bankNumber: {
          label: '银行卡号',
          value: '',
          require: true,
          requireMessage: '请输入银行卡号'
        }
      },
      showBank: false,
      bankList: ['中国建设银行', '中国银行', '中国工商银行', '中国农业银行'],
      // 微信Model
      weChatModel: {
        acountName: {
          label: '账户名',
          value: '',
          require: true,
          requireMessage: '请输入账户名'
        },
        weChat: {
          label: '微信号',
          value: '',
          require: true,
          requireMessage: '请输入微信号'
        },
        weChatQR: {
          label: '微信收款码',
          value: '',
          require: true,
          requireMessage: '请上传微信收款码'
        }
      },
      weChatQR: [],
      // 支付宝Model
      alipayModel: {
        acountName: {
          label: '账户名',
          value: '',
          require: true,
          requireMessage: '请输入账户名'
        },
        alipay: {
          label: '支付宝账号',
          value: '',
          require: true,
          requireMessage: '请输入支付宝账号'
        },
        alipayQR: {
          label: '支付宝收款码',
          value: '',
          require: true,
          requireMessage: '请上传支付宝收款码'
        }
      },
      alipayQR: [],
      isDefault: false
    }
  },
  methods: {
    bankConfirm(value) {
      console.log(value)
      this.bankModel.bank.value = value
      this.showBank = false
    },
    afterRead(file, type) {
      upLoad({
        Content: this.$utils.getCaption(file.content, 'base64,'),
        FileType: this.$utils.getCaption(file.file.type, '/')
      }).then(res => {
        //console.log(res);
        if (res) {
          if (type == 'wechat') {
            this.weChatModel.weChatQR.value = res.Data.Path
          } else if (type == 'alipay') {
            this.alipayModel.alipayQR.value = res.Data.Path
          }
        }
      })
    },
    afterDelete(file, detail, type) {
      if (type == 'wechat') {
        this.weChatModel.weChatQR.value = ''
      } else if (type == 'alipay') {
        this.alipayModel.alipayQR.value = ''
      }
    },
    submit() {
      let self = this
      if (this.acountType) {
        if (this.acountType == '1') {
          // 银行卡
          if (self.$utils.formValidate(self.bankModel).valid) {
          } else {
            this.$toast(self.$utils.formValidate(self.bankModel).msg)
          }
        } else if (this.acountType == '2') {
          // 微信
          if (self.$utils.formValidate(self.weChatModel).valid) {
          } else {
            this.$toast(self.$utils.formValidate(self.weChatModel).msg)
          }
        } else if (this.acountType == '3') {
          // 支付宝
          if (self.$utils.formValidate(self.alipayModel).valid) {
          } else {
            this.$toast(self.$utils.formValidate(self.alipayModel).msg)
          }
        }
      } else {
        this.$toast('请选择收款类型')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.bankType {
  .van-cell__title {
    width: 1.2rem;
    flex: none;
  }
}
</style>
